<template>
  <div>
    <div>
      <yd-cell-item>
          <span slot="left">{{saleinfo.name}}</span>
        </yd-cell-item>
    </div>
    <div>
      <yd-cell-item>
        <span slot="left">购买数量</span>
        <span slot="right" style="margin-right:5px;"><span>{{spinner2}}</span>张</span>
      </yd-cell-item>
    </div>
    <div>
      <yd-cell-item>
        <span slot="left">订单总价</span>
        <span slot="right" style="margin-right:5px;color:#FF8800">￥{{saleinfo.guide_price*spinner2 / 100}}</span>
      </yd-cell-item>
    </div>
    <div style="border-top:10px solid #F0F0F0;border-bottom:10px solid #F0F0F0;">
      <yd-cell-item>
        <span slot="left">姓名：</span>
        <yd-input slot="right" v-model="input1" max="20" placeholder="请输入用户名" style="float:right"></yd-input>
        </yd-cell-item>
      <yd-cell-item arrow>
        <span slot="left">{{this.mobile1}}</span>
        <div slot="right"  @click="show1 = true">选择手机号</div>
      </yd-cell-item>
    </div>
    <div>
      <yd-cell-group>
        <yd-cell-item>
          <hd-svg-icon name="hd-tishi" size="15px" slot="left"></hd-svg-icon>
          <span slot="left" style="margin-left:5px;">购买须知</span>
        </yd-cell-item>
      </yd-cell-group>
    </div>
    <div style="width:80%;margin-left:10%;font-size:.26rem;">
      <span v-html="saleinfo.detail"></span>
    </div>
    <yd-tabbar fixed bgcolor="#ffffff" class="bottabbar" v-bind:style="mb">
      <div style="width:62%;">
        <yd-spinner min="1" unit="1" v-model="spinner2" height=".8rem"></yd-spinner>
      </div>
      <div style="">
          <yd-button type="warning" style="width:100%;height:40px;margin-right:0px" @click.native="clickCreateOrderDiscount(saleinfo.guide_price)">￥{{saleinfo.guide_price*spinner2 / 100}} 提交订单</yd-button>
      </div>
    </yd-tabbar>
    <!-- <yd-tabbar fixed bgcolor="#FF4040" class="bottabbar" v-if="lastdata.book==='0'">
        <div style="height:40px;width:100%;" class="r_url">
          <router-link :to="{path:'blue_onlinebooking',query: {place_code:lastdata.place_code}}">立即购买
          </router-link>
        </div>
    </yd-tabbar> -->

    <!-- 输入手机号 -->
    <yd-popup v-model="show1" position="center" width="70%">
          <yd-cell-item style="height:60px;">
            <yd-input slot="right" v-model="mobile" regex="mobile" placeholder="请输入手机号码"></yd-input>
          </yd-cell-item>
          <div style="text-align:center">
            <div style="float:left;width:50%">
                <yd-button @click.native="clickChangeMobile()" style="width:83%" type="warning">确定</yd-button>
            </div>
            <div style="float:left;width:50%">
                <yd-button @click.native="show1 = false" style="width:83%" type="warning">取消</yd-button>
            </div>
          </div>
    </yd-popup>
  </div>
</template>
<script>
export default {
  name: 'blueordersubmit',
  data() {
    return {
      spinner2: 0,
      show1: false,
      mobile: '',
      mobile1: '',
      saleinfo: {},
      input1: '',
      mb: {
        'margin-bottom': '1rem'
      }
    }
  },
  mounted: function() {
    this.load();
    var ua = window.navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
      this.mb = {
        'margin-bottom': '0rem'
      }
    } else {
      this.mb = {
        'margin-bottom': '1rem'
      }
    }
  },
  methods: {
    load() {
      this.hdAjax({
        url: this.API.mealsaleinfo,
        data: {
          code: this.$route.query.code
        },
        success: (resultData) => {
          this.saleinfo = resultData.data;
        }
      })
      this.hdAjax({
        url: this.API.myInfo,
        dataType: 'json',
        success: (resultData) => {
          if (resultData.status === 1) {
            if (resultData.result.mobile === '' || resultData.result.mobile === null) {
              this.$dialog.confirm({
                mes: '请先绑定手机号',
                opts: () => {
                  this.$router.push({path: 'member_reg', query: {code: this.code}});
                }
              });
            } else {
              this.mobile1 = resultData.result.mobile
            }
          }
        }
      })
    },
    clickCreateOrderDiscount(guideprice) {
      if (this.input1 == '') {
        this.$dialog.toast({mes: '请填写联系人姓名'})
        return;
      }
      if (this.mobile1 == '') {
        this.$dialog.toast({mes: '请填写联系人手机号码'})
        return;
      }
      this.hdAjax({
        url: this.API.createOrderDiscount,
        method: 'POST',
        data: {
          sale_code: this.$route.query.code,
          pay_fee: this.spinner2 * guideprice / 100,
          num: this.spinner2,
          mobile: this.mobile1,
          name: this.input1
        },
        success: (resultData) => {
          this.$dialog.toast({mes: '下单成功!'})
          console.log(resultData);
          var ua = window.navigator.userAgent.toLowerCase();
          if (ua.match(/MicroMessenger/i) == 'micromessenger') {
            location.href = 'http://dlqt.juyouhx.com/huludaoweixin/?#/boutique_pay?orderCode=' + resultData.data;
          } else {
            location.href = 'https://dlqt.juyouhx.com/Api/Api/aliPay?wxid=1&type=2&extra_param=98&orderid=' + resultData.data;
          }
          // location.href = 'http://dlqt.juyouhx.com/huludaoweixin/?#/boutique_pay?orderCode=' + resultData.data;
        }
      })
    },
    clickChangeMobile() {
      if (!this.mobile) {
        this.$dialog.toast({mes: '请输入手机号!'})
        return false
      } else {
        this.mobile1 = this.mobile;
        this.show1 = false;
      }
    }
  }
}
</script>
<style>
  .bottabbar{
    float: left;
    width: 100%;
    height: 50px;
    border-top: 1px solid #bbbbbb;
    z-index: 999;
    /* padding: 5px 5%; */
  }
</style>


